<template>
	<div class="sync-banner">
		<!-- 顶部 -->
		<div class="top">
			<nav-bar
				:title="name"
				left-text=""
				left-arrow
				@click-left="onClickLeft"
			/>
		</div>
		<!-- 选项卡 -->
		<div class="option">
			<!-- 选项 -->
			<div class="IPV">
				<span @click="ipv">{{ ipvtxt }}</span>
				<span @click="grade">{{ grtxt }}</span>
			</div>
			<!-- 遮罩层 -->
			<overlay
				:show="show"
				@click="layshow"
				class-name="lay"
				z-index="1"
			/>
			<!-- 选项内容 -->
			<div class="left" v-show="isShow">
				<span @click="text">人教版（五四制)</span>
				<br />
				<span @click="text">人教编版</span>
			</div>
			<div class="right" v-show="thisShow" @click="mate">
				<span v-for="i in 6" @click="show = false"> {{ i }}年级 </span>
			</div>
		</div>

		<!-- 折叠面板 -->
		<div class="nav">
			<tabs scrollspy sticky offset-top="10.3vh">
				<tab v-for="index in 8" :title="'第' + index + '单元'">
					<div id="unitl">
						<p><span>第单元识字</span></p>
						<collapse v-model="activeNames">
							<collapse-item
								:title="item.title"
								label-class="coll"
								v-for="item in Free"
							>
								<p id="pp">
									{{ item.title
									}}<icon
										@click="lock"
										style="float: right"
									/>
								</p>
							</collapse-item>
						</collapse>
					</div>
				</tab>
			</tabs>
		</div>

		<div class="yearblack" v-if="blackshow" @click="black"></div>
		<div class="years" v-show="buyshow">
			<icon name="cross" class="cross" @click="Buy" />
			<p>请选择解锁年限</p>
			<div class="year">
				<div @click="current = 0" :class="current == 0 ? 'org' : ''">
					<h4>一年</h4>
					<p>￥<b>198</b></p>
				</div>
				<div @click="current = 1" :class="current == 1 ? 'org' : ''">
					<h4>二年</h4>
					<p>￥<b>298</b></p>
				</div>
				<div @click="current = 2" :class="current == 2 ? 'org' : ''">
					<h4>三年</h4>
					<p>￥<b>398</b></p>
				</div>
			</div>
		</div>
		<div class="bottom" @click="buy">
			<p><b>￥199</b> 解锁同步课程</p>
		</div>
	</div>
</template>
<script setup>
import { ref } from "vue";
import {
	NavBar,
	Popup,
	Tab,
	Tabs,
	Collapse,
	CollapseItem,
	DropdownMenu,
	DropdownItem,
	Toast,
	Overlay,
	Button,
	Icon,
} from "vant";
import "vant/es/toast/style";
import { FreeCourse } from "../API/shang";
// import { useRouter } from "vue-router";

import { useRouter, useRoute } from "vue-router";
const Free = ref([]);
FreeCourse().then((res) => {
	// console.log(res.data);
	Free.value = res.data;
	console.log(Free.value);
});

const router = useRouter();
const route = useRoute();
const onClickLeft = () => {
	router.go(-1);
};

const activeNames = ref(["1"]);

const show = ref(false);

/* 选项卡 */
const ipvtxt = ref("版本");
const ben = ref("");
const grtxt = ref("年级");
const cla = ref("");
const math = ref("");
const isShow = ref(false);
const thisShow = ref(false);

// let id = route.query.id;
let name = JSON.parse(route.query.name);
const ipv = () => {
	isShow.value = !isShow.value;
	show.value = !show.value;
};

const grade = (e) => {
	if (ben.value == ipvtxt.value) {
		thisShow.value = !thisShow.value; //年级选项显示
		show.value = !show.value; //遮罩层显示
	} else {
		Toast.fail("请先选择教材版本");
	}
};
const text = (e) => {
	console.log(e.target.innerText);
	ipvtxt.value = e.target.innerText;
	ben.value = e.target.innerText;
	isShow.value = !isShow.value; //版本选项消失
	thisShow.value = true; //年级选项出现
};
const mate = (e) => {
	grtxt.value = e.target.innerText;
	cla.value = e.target.innerText;
	thisShow.value = false;
};
/* 遮罩层 */
const layshow = () => {
	show.value = false;
	isShow.value = false;
	thisShow.value = false;
};

/* lock */
const lock = () => {
	Toast("解锁课程后才能学习哦~");
};

/* buy */
const blackshow = ref(false);
const buyshow = ref(false);
const buy = () => {
	buyshow.value = !buyshow.value;
	blackshow.value = !blackshow.value;
};
const Buy = () => {
	buyshow.value = false;
	blackshow.value = false;
};
const black = () => {
	buyshow.value = false;
	blackshow.value = false;
};
const current = ref(0);
/* 调接口 */
</script>

<!-- --------------------------------------------------------------------------------------------------------------------------------------------- -->
<style scoped>
.sync-banner .cross {
	float: right;
	background-color: rgb(229, 229, 229);
	color: white;
}
.sync-banner .year .org {
	border: 0.125rem solid rgb(246, 205, 141);
	background-color: rgb(254, 244, 232);
	color: rgb(245, 135, 0);
}
.sync-banner .lev {
	width: 100%;
	height: 3vh;
	background-color: rgb(243, 243, 243);
}
.sync-banner .top {
	position: sticky;
	top: 0;
	background-color: white;
	z-index: 9;
}
.sync-banner #unitl {
	width: 100%;
	background-color: white;
	padding-top: 0.625rem;
}
.sync-banner #unitl > p {
	padding-top: 2vh;
	background-color: rgb(243, 243, 243);
	height: 5vh;
}
.sync-banner #unitl > p span {
	background-color: rgb(25, 151, 235);
	height: 3vh;
	line-height: 3vh;
	color: white;
	font-size: 0.6rem;
	text-align: center;
	display: inline-block;
	width: 100px;
	border-radius: 10px 10px 0 0;
}
.sync-banner .dropdown-menu {
	position: sticky;
	top: 5vh;
	z-index: 10;
}
.sync-banner .option {
	width: 100%;
	height: 5.5vh;
	background-color: rgb(243, 243, 243);
	position: sticky;
	top: 5vh;
	z-index: 10;
	font-size: 0.875rem;
	color: rgb(117, 117, 117);
}
.sync-banner .left,
.sync-banner .right {
	width: 100%;
	background-color: white;
	border: 0.0625rem solid #cecece;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.sync-banner .left span {
	width: 30%;
	font-size: 0.75rem;
	background-color: var(--main-color);
	height: 1.875rem;
	text-align: center;
	line-height: 1.875rem;
	color: white;
	border-radius: 13px;
	margin: 0.625rem 0;
}
.sync-banner .right span {
	width: 30%;
	display: inline-block;
	text-align: center;
	line-height: 1.875rem;
}
.sync-banner .bottom {
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8vh;
	background-color: rgb(19, 159, 255);
	color: white;
	text-align: center;
	line-height: 8vh;
	z-index: 100;
}
.sync-banner .bottom p {
	font-size: 0.8rem;
}
.sync-banner .lay {
	height: 80vh;
	top: 22vh;
}
.sync-banner .IPV {
	width: 100%;
	height: 5.5vh;
	display: flex;
	justify-content: space-around;
	line-height: 5.5vh;
}
.sync-banner .IPV:visited {
	color: var(--main-color);
}
/* #pp{
  background-color: red;
} */
.sync-banner .coll {
	color: red;
}
.sync-banner .years {
	position: sticky;
	bottom: 8vh;
	width: 100%;
	height: 28vh;
	background-color: white;
	z-index: 100;
}
.sync-banner .years > p {
	height: 10vh;
	font-size: 1rem;
	text-align: center;
	color: #999999;
	line-height: 10vh;
}
.sync-banner .year {
	width: 100%;
	height: 18vh;
	display: flex;
	justify-content: space-around;
}
.sync-banner .year div {
	width: 26%;
	height: 85%;
	border: 0.125rem solid #e6e6e6;
	border-radius: 10%;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: space-around;
	text-align: center;
}
.sync-banner .yearblack {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.542);
	z-index: 99;
}
</style>
